<template>
  <div id="admin-r">
    <div class="set-cherts">
        <div class="top-s">巡检不良整改完成率</div>
        <div class="set-con set-flex">
            <div style="width: 100%;height: 100%;" ref="comCharOne"></div>
        </div>
    </div>
    <div class="set-cherts">
        <div class="top-s">巡检不良汇总</div>
        <div class="set-con set-flex">
            <div class="ring-s">
                <!-- <div class="out-ring"></div> -->
                <div style="width: 100%;height: 100%;" ref="ringChar"></div>
                <!-- <div class="in-ring">汇总</div> -->
            </div>
        </div>
    </div>
    <div class="set-cherts">
        <div class="top-s">特殊作业</div>
        <div class="set-con set-flex">
            <ul class="car-s">
                <li><span class="text-s" style="width: 40px">新增</span><span class="car-info in-s">398</span></li>
                <li><span class="text-s" style="width: 40px">关闭</span><span class="car-info out-s">405</span></li>
                <li><span class="text-s" style="width: 40px">施工中</span><span class="car-info stay-s">317</span></li>
            </ul>
            <div :style="fontSizeFun" style="width: 100%; height: 100%" ref="carChar"></div>
        </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'admin-r',
  data() {
    return {
        
    };
  },
  components: { },
  
  mounted() {
    let that = this
    that.$nextTick(() => {
        that.fontSizeFun(14)
        that.optionRing()
        that.initChartsOne()
        that.initChartsCarChar()
    })
  },
  methods: {
    fontSizeFun(val,initWidth=1920){
        const nowClientWidth = document.documentElement.clientWidth
        return val * (nowClientWidth/initWidth) + 'px'
    },

    initChartsOne(){
        let myChart = echarts.init(this.$refs.comCharOne)
        let option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                },
            },
            grid: {
                top: 34,
                left: '2%',
                right: '5%',
                bottom: 4,
                containLabel: true,
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['02-01','02-05','02-10','02-15','02-20','02-25','02-30'],
                axisTick: {
                    show: false
                },
                axisLine:{
                    lineStyle: {
                        color:'rgb(6,65,130)',
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: "rgb(145,179,203)"
                    },
                    interval: 0
                }
            },
            yAxis: {
                name:'百分比',
                type: 'value',
                axisTick: {
                    show: false
                },
                splitLine: {
                    lineStyle: {
                        color: ['rgb(6,65,130)'],
                    }
                },
                axisLine:{
                    show: false,
                    lineStyle: {
                        color:'rgb(145,179,203)',
                    }
                },
                axisLabel: {
                    show: true,
                    formatter: '{value} %',
                    textStyle: {
                        color: "rgb(145,179,203)"
                    },
                },
                nameTextStyle:{
                    padding: [0,50,0,0]
                },
                max: 100,
                min: 0,
            },
            series: [
                {
                    type: 'line',
                    stack: 'Total',
                    smooth: true,
                    areaStyle: {
                        // 折线区块颜色
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: 'rgba(23,209,255,1)'
                            },
                            {
                                offset: 1,
                                color: 'rgba(23,209,255,0)'
                            }
                        ])
                    },
                    itemStyle: {
                        normal: {
                            // 改变折线点的颜色
                            color: 'rgba(23,209,255,1)',
                            lineStyle: {
                                // 改变折线颜色
                                color: 'rgba(23,209,255,1)',
                            }
                        }
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [20, 50, 30, 80, 40 ,50 , 10]
                }
            ]
        }
        return option && myChart.setOption(option)
    },


    /*** optionRing 饼图 */
    optionRing(){
        let myChart = echarts.init(this.$refs.ringChar)
        let option = {
            color: ['rgb(6,235,125)','rgb(159,224,128)','rgb(223,184,38)'],
            tooltip: {
                trigger: 'item',
                position: 'top',
            },
            legend: {
                textStyle:{
                    color:'#FFFFFF',
                },
                bottom: 4,
                itemWidth: 12,
                itemHeight: 12,
                padding: 0,
                data: [
                    {name: '工具摆放杂乱',icon: 'rect',itemStyle:{color:'#00FF99'}},
                    {name: '态度不良',icon: 'rect',itemStyle:{color:'#9FE080'}},
                    {name: '其他原因',icon: 'rect',itemStyle:{color:'#FFC300'}},
                ],
            },
            series: [
                {
                    type: 'pie',
                    radius: ['30%','70%'],
                    center: ['50%','40%'],
                    data: [
                        { value: 580, name: '工具摆放杂乱' },
                        { value: 735, name: '态度不良' },
                        { value: 1048, name: '其他原因' },
                    ],
                    labelLine:{
                        length1: 5,
                        length2: 22,
                    },
                    label: {
                        formatter: '{b}\n{d}%',
                        padding: [0,-20,0,-20],
                        color: '#FFFFFF',
                    },
                }
            ]
        }
        return option && myChart.setOption(option)
    },

    initChartsCarChar(){
        let myChart = echarts.init(this.$refs.carChar)
        let option = {
            legend: {
                bottom: 4,
                left: 'center',
                textStyle:{
                    color:'#FFFFFF',
                },
                itemWidth: 12,
                itemHeight: 12,
                padding: 0,
                data: [
                    {name: '新增',icon: 'rect',itemStyle:{color:'rgb(6,206,255)'}},
                    {name: '关闭',icon: 'rect',itemStyle:{color:'rgb(255,195,0)'}},
                    {name: '施工中',icon: 'rect',itemStyle:{color:'rgb(159,224,128)'}},
                ],
            },
            grid: {
                left: '2%',
                top: 20,
                right: '2%',
                bottom: 30,
                containLabel: true
            },
            tooltip: {},
            dataset: {
                dimensions: ['product', '新增', '关闭', '施工中'],
                source: []
            },
            xAxis: { 
                type: 'category',
                axisLine:{
                    lineStyle: {
                        color:'#3f6986',
                    }
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    textStyle: {
                        color: "#FFFFFF"
                    } 
                }
            },
            yAxis: {
                splitLine: {
                    lineStyle: {
                        color: ['#3f6986']
                    }
                },
                axisLine:{
                    show: false,
                    lineStyle: {
                        color:'#3f6986',
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: "#FFFFFF"
                    } 
                }
            },
            series: [
                { 
                    type: 'bar',
                    barMaxWidth: '15%',
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: 'rgba(6,204,253,1)' },
                            { offset: 1, color: 'rgba(6,74,104,1)' }
                        ])
                    }
                }, 
                { 
                    type: 'bar',
                    barMaxWidth: '15%',
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: 'rgba(251,193,0,1)' },
                            { offset: 1, color: 'rgba(97,74,0,1)' }
                        ])
                    }
                },
                { 
                    type: 'bar',
                    barMaxWidth: '15%',
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: 'rgba(159,224,128,1)' },
                            { offset: 1, color: 'rgba(64,107,44,1)' }
                        ])
                    }
                },
            ]
        }
        option.dataset.source = [
            { product: '06:00', '新增': 43, '关闭': 85, '施工中': 93 },
            { product: '09:00', '新增': 83, '关闭': 73, '施工中': 55 },
            { product: '12:00', '新增': 86, '关闭': 65, '施工中': 82 },
            { product: '15:00', '新增': 62, '关闭': 43, '施工中': 29 },
            { product: '18:00', '新增': 62, '关闭': 43, '施工中': 29 },
            { product: '21:00', '新增': 62, '关闭': 43, '施工中': 29 }
        ]
        return option && myChart.setOption(option)
    },
  },
};
</script>

<style lang="scss" scoped>

::-webkit-scrollbar{
    width: 2px;
    height: 2px;
}
::-webkit-scrollbar-track {
    background: rgba($color: #f3f4f9, $alpha: 0.1);
    border-radius: 2px;
}
::-webkit-scrollbar-thumb {
    background: rgba($color:  #c8d2e0, $alpha: 0.1);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba($color:   #b4b4b4, $alpha: 0.1);
}
::-webkit-scrollbar-corner {
    background: rgba($color:    #c8d2e0, $alpha: 0.1);
}
// 火狐
* {
    scrollbar-color: #c8d2e0 #f3f4f9;
    /* 滑块颜色  滚动条背景颜色 */
    scrollbar-width: thin;
    /* 滚动条宽度有三种：thin、auto、none */
}
.set-con{
    width: 100%;
    height: 78%;
    overflow: hidden;
}
.set-con:hover{
    overflow: hidden;
}
.set-flex{
    display: flex;
    justify-content: center;
    flex-direction: column;
}
/*** 滚动条样式优化 */

#admin-r{
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    height: 100%;
    .set-cherts{
        width: 100%;
        height: 32.7%;
        background: rgba($color: #0F2F5C, $alpha: 0.2);
        .top-s{
            padding: 10px 0 10px 10px;
            font-weight: 600;
            font-style: oblique;
            background: rgba($color: #153863, $alpha: 0.4);
        }
        .admin-l-4-echarts{
            width: 100%;
            height: 100%;
        }
        .ring-s{
            height: 90%;
            position: relative;
            // border: 1px solid red;
            .out-ring{
                position: absolute;
                width: 7vw;
                height: 7vw;
                top: 50%;
                left: 50%;
                margin-top: -3.5vw;
                margin-left: -3.5vw;
                border-radius: 50%;
                border: 1px dashed rgb(57,114,212);
            }
            .in-ring{
                position: absolute;
                width: 3.4vw;
                height: 3.4vw;
                top: 50%;
                left: 50%;
                margin-top: -1.7vw;
                margin-left: -1.7vw;
                border-radius: 50%;
                border: 1px solid rgb(57,114,212);
                display: block;
                background-image: linear-gradient(to right, #f63031, #f7b33b);
                -webkit-background-clip: text;
                color: transparent;
                font-weight: 1000;
                font-size: 10px;
                text-align: center;
                line-height: 3.4vw;
                font-style: italic;
            }
        }
        .car-s{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            width: 56%;
            margin: 10px auto 0 auto;
            li{
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;  
            }
            .in-s , .out-s , .stay-s{
                padding: 5px 10px;
                margin-left: 5px;
                color: #FFFFFF;
            }
            .in-s{
                background: rgba($color: #00DDFF, $alpha: 0.5);
            }
            .out-s{
                background: rgba($color: #FFC300, $alpha: 0.5);
            }
            .stay-s{
                background: rgba($color: #9FE080, $alpha: 0.5);
            }
        }
    }
}
</style>